<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  getAllTeamByPage,
  getTeamApplyByPage,
  getAllTeamAccount,
  getTeamMembersByPage,
  getTeamAccountsByPage,
  getPageApprovalTeamAccount,
  approvalTeamAccount,
  approvalCreateTeam,
  getPageMemberByAccount,
  getPageApplyJoinTeamAccount,
  approvalJoinTeamAccount,
  stopAccountMember,
  startAccountMember,
  updateTeam
} from "@/api";
import { ElTable, ElMessage } from "element-plus";
import { Plus, Edit, Check, Close, User } from "@element-plus/icons-vue";

interface TeamRecord {
  id: number;
  uuid: string;
  name: string;
  status: string;
  remark: string | null;
  created_at: string;
  updated_at: string;
  description: string;
}

interface TeamApplyRecord {
  id: number;
  initiator_id: number;
  reviewer_id: number | null;
  status: string;
  remark: string | null;
  created_at: string;
  updated_at: string;
  team_name: string;
  description: string;
  initiator_name: string;
  reviewer_name: string | null;
}

interface AccountApplyRecord {
  id: number;
  team_id: number;
  account_name: string;
  description: string;
  reviewer_id: number | null;
  status: string;
  remark: string | null;
  created_at: string;
  updated_at: string;
  initiator_id: number;
  team_name: string;
  initiator_name: string;
  reviewer_name: string | null;
}

interface PaginationInfo {
  total: number;
  per_page: number;
  current_page: number;
  last_page: number;
  has_more: boolean;
  has_last: boolean;
}

interface TeamResponse {
  status: string;
  data: {
    records: TeamRecord[];
    pagination: PaginationInfo;
  };
}

interface AccountRecord {
  id: number;
  team_id: number;
  account_number: string;
  status: string;
  remark: string | null;
  created_at: string;
  updated_at: string;
  name: string;
  description: string;
  team_name: string;
}

interface TeamMemberInfo {
  id: number;
  team_id: number;
  henau_number: string;
  name: string;
  status: string;
  remark: string | null;
  created_at: string;
  updated_at: string;
  role: string;
}

interface AccountMemberRecord {
  id: number;
  team_id: number;
  member_id: number;
  account_id: number;
  status: string;
  remark: string | null;
  created_at: string;
  updated_at: string;
  member_name: string;
  henau_number: string;
  team_role: string;
}

interface AccountMemberApplyRecord {
  id: number;
  account_id: number;
  initiator_henau_number: string;
  initiator_name: string;
  reviewer_id: number | null;
  status: string;
  remark: string | null;
  created_at: string;
  updated_at: string;
}

const tableData = ref<TeamRecord[]>([]);
const applyTableData = ref<TeamApplyRecord[]>([]);
const pagination = ref<PaginationInfo>({
  total: 0,
  per_page: 10,
  current_page: 1,
  last_page: 1,
  has_more: false,
  has_last: false
});

const applyPagination = ref<PaginationInfo>({
  total: 0,
  per_page: 10,
  current_page: 1,
  last_page: 1,
  has_more: false,
  has_last: false
});

const loading = ref(false);
const applyLoading = ref(false);
const applyDialogVisible = ref(false);

const activeTab = ref("team");
const accountTableData = ref<AccountRecord[]>([]);
const accountPagination = ref<PaginationInfo>({
  total: 0,
  per_page: 10,
  current_page: 1,
  last_page: 1,
  has_more: false,
  has_last: false
});
const accountLoading = ref(false);

const teamMemberList = ref<TeamMemberInfo[]>([]);
const teamAccountList = ref<AccountRecord[]>([]);
const teamInfoDialogVisible = ref(false);
const currentTeamInfo = ref<TeamRecord | null>(null);
const teamMemberLoading = ref(false);
const teamAccountLoading = ref(false);

const teamMemberQuery = ref({
  page: 1,
  size: 10,
  team_id: null as number | null
});

const teamAccountQuery = ref({
  page: 1,
  size: 10,
  team_id: null as number | null
});

const accountApplyDialogVisible = ref(false);
const accountApplyLoading = ref(false);
const accountApplyTableData = ref<AccountApplyRecord[]>([]);
const accountApplyPagination = ref<PaginationInfo>({
  total: 0,
  per_page: 10,
  current_page: 1,
  last_page: 1,
  has_more: false,
  has_last: false
});

const accountMemberDialogVisible = ref(false);
const accountMemberLoading = ref(false);
const accountMemberList = ref<AccountMemberRecord[]>([]);
const currentAccountInfo = ref<AccountRecord | null>(null);
const accountMemberPagination = ref<PaginationInfo>({
  total: 0,
  per_page: 10,
  current_page: 1,
  last_page: 1,
  has_more: false,
  has_last: false
});

const accountMemberApplyDialogVisible = ref(false);
const accountMemberApplyLoading = ref(false);
const accountMemberApplyList = ref<AccountMemberApplyRecord[]>([]);
const accountMemberApplyPagination = ref<PaginationInfo>({
  total: 0,
  per_page: 10,
  current_page: 1,
  last_page: 1,
  has_more: false,
  has_last: false
});

// 新增状态变量
const accountUsersDialogVisible = ref(false);
const accountUsersLoading = ref(false);
const accountUsersList = ref<AccountMemberRecord[]>([]);
const currentAccountId = ref<number>(0);
const accountUsersPagination = ref<PaginationInfo>({
  total: 0,
  per_page: 10,
  current_page: 1,
  last_page: 1,
  has_more: false,
  has_last: false
});

// 新增修改团队信息相关变量
const editTeamDialogVisible = ref(false);
const editTeamForm = ref({
  team_id: 0,
  team_name: "",
  description: ""
});
const editTeamLoading = ref(false);

const fetchTeamData = async () => {
  try {
    loading.value = true;
    const response = await getAllTeamByPage({
      page: pagination.value.current_page,
      size: pagination.value.per_page
    });
    tableData.value = response.data.records;
    pagination.value = response.data.pagination;
  } catch (error) {
    console.error("获取团队列表失败:", error);
  } finally {
    loading.value = false;
  }
};

const fetchApplyTeamData = async () => {
  try {
    applyLoading.value = true;
    const response = await getTeamApplyByPage({
      page: applyPagination.value.current_page,
      size: applyPagination.value.per_page,
      status: "pending"
    });
    applyTableData.value = response.data.records;
    applyPagination.value = response.data.pagination;
  } catch (error) {
    console.error("获取审批团队列表失败:", error);
  } finally {
    applyLoading.value = false;
  }
};

const handleApprove = async (row: TeamApplyRecord) => {
  try {
    loading.value = true;
    await approvalCreateTeam({
      application_id: row.id,
      status: "approved"
    });
    ElMessage.success("审批成功");
    await fetchApplyTeamData();
  } catch (error: any) {
    ElMessage.error(error.message || "审批失败");
  } finally {
    loading.value = false;
  }
};

const handleReject = async (row: TeamApplyRecord) => {
  try {
    loading.value = true;
    await approvalCreateTeam({
      application_id: row.id,
      status: "rejected"
    });
    ElMessage.success("拒绝成功");
    await fetchApplyTeamData();
  } catch (error: any) {
    ElMessage.error(error.message || "拒绝失败");
  } finally {
    loading.value = false;
  }
};

const showApplyDialog = () => {
  applyDialogVisible.value = true;
  fetchApplyTeamData();
};

const fetchAccountData = async () => {
  try {
    accountLoading.value = true;
    const response = await getAllTeamAccount({
      page: accountPagination.value.current_page,
      size: accountPagination.value.per_page
    });
    accountTableData.value = response.data.records;
    accountPagination.value = response.data.pagination;
  } catch (error) {
    console.error("获取账号列表失败:", error);
  } finally {
    accountLoading.value = false;
  }
};

const getTeamMembers = async () => {
  if (!currentTeamInfo.value?.id) return;
  try {
    teamMemberLoading.value = true;
    const res = await getTeamMembersByPage({
      team_id: currentTeamInfo.value.id,
      page: teamMemberQuery.value.page,
      size: teamMemberQuery.value.size
    });
    if (res.data) {
      teamMemberList.value = res.data.records;
    }
  } catch (error) {
    console.error("获取团队成员失败:", error);
  } finally {
    teamMemberLoading.value = false;
  }
};

const getTeamAccounts = async () => {
  if (!currentTeamInfo.value?.id) return;
  try {
    teamAccountLoading.value = true;
    const res = await getTeamAccountsByPage({
      team_id: currentTeamInfo.value.id,
      page: teamAccountQuery.value.page,
      size: teamAccountQuery.value.size
    });
    if (res.data) {
      teamAccountList.value = res.data.records;
    }
  } catch (error) {
    console.error("获取团队账号失败:", error);
  } finally {
    teamAccountLoading.value = false;
  }
};

const handleViewTeamInfo = (row: TeamRecord) => {
  currentTeamInfo.value = row;
  teamInfoDialogVisible.value = true;
  teamMemberQuery.value.team_id = row.id;
  teamAccountQuery.value.team_id = row.id;
  getTeamMembers();
  getTeamAccounts();
};

const getRoleTagType = (role: string) => {
  switch (role) {
    case "admin":
      return "danger";
    case "member":
      return "info";
    default:
      return "info";
  }
};

const getRoleText = (role: string) => {
  switch (role) {
    case "admin":
      return "管理员";
    case "member":
      return "组员";
    default:
      return "未知";
  }
};

const fetchAccountApplyData = async () => {
  try {
    accountApplyLoading.value = true;
    const response = await getPageApprovalTeamAccount({
      page: accountApplyPagination.value.current_page,
      size: accountApplyPagination.value.per_page,
      status: "pending"
    });
    accountApplyTableData.value = response.data.records;
    accountApplyPagination.value = response.data.pagination;
  } catch (error) {
    console.error("获取账号审批列表失败:", error);
  } finally {
    accountApplyLoading.value = false;
  }
};

const handleApproveAccount = async (row: AccountApplyRecord) => {
  try {
    loading.value = true;
    await approvalTeamAccount({
      application_id: row.id,
      status: "approved"
    });
    ElMessage.success("审批成功");
    await fetchAccountApplyData();
  } catch (error: any) {
    ElMessage.error(error.message || "审批失败");
  } finally {
    loading.value = false;
  }
};

const handleRejectAccount = async (row: AccountApplyRecord) => {
  try {
    loading.value = true;
    await approvalTeamAccount({
      application_id: row.id,
      status: "rejected"
    });
    ElMessage.success("拒绝成功");
    await fetchAccountApplyData();
  } catch (error: any) {
    ElMessage.error(error.message || "拒绝失败");
  } finally {
    loading.value = false;
  }
};

const showAccountApplyDialog = () => {
  accountApplyDialogVisible.value = true;
  fetchAccountApplyData();
};

const handleViewAccountMembers = async (row: AccountRecord) => {
  currentAccountInfo.value = row;
  accountMemberDialogVisible.value = true;
  await fetchAccountMembers(row.id, row.team_id);
};

const fetchAccountMembers = async (accountId: number, teamId: number) => {
  try {
    accountMemberLoading.value = true;
    const response = await getPageMemberByAccount({
      account_id: accountId,
      team_id: teamId,
      page: accountMemberPagination.value.current_page,
      size: accountMemberPagination.value.per_page
    });
    accountMemberList.value = response.data.records;
    accountMemberPagination.value = response.data.pagination;
  } catch (error) {
    console.error("获取账号成员列表失败:", error);
  } finally {
    accountMemberLoading.value = false;
  }
};

const showAccountMemberApplyDialog = async (accountId: number) => {
  accountMemberApplyDialogVisible.value = true;
  await fetchAccountMemberApply(accountId);
};

const fetchAccountMemberApply = async (accountId: number) => {
  try {
    accountMemberApplyLoading.value = true;
    const response = await getPageApplyJoinTeamAccount({
      account_id: accountId,
      team_id: currentAccountInfo.value?.team_id || 0,
      page: accountMemberApplyPagination.value.current_page,
      size: accountMemberApplyPagination.value.per_page
    });
    accountMemberApplyList.value = response.data.records;
    accountMemberApplyPagination.value = response.data.pagination;
  } catch (error) {
    console.error("获取账号成员申请列表失败:", error);
  } finally {
    accountMemberApplyLoading.value = false;
  }
};

const handleApproveAccountMember = async (row: AccountMemberApplyRecord) => {
  try {
    loading.value = true;
    await approvalJoinTeamAccount({
      application_id: row.id,
      status: "approved"
    });
    ElMessage.success("审批成功");
    await fetchAccountMemberApply(row.account_id);
  } catch (error: any) {
    ElMessage.error(error.message || "审批失败");
  } finally {
    loading.value = false;
  }
};

const handleRejectAccountMember = async (row: AccountMemberApplyRecord) => {
  try {
    loading.value = true;
    await approvalJoinTeamAccount({
      application_id: row.id,
      status: "rejected"
    });
    ElMessage.success("拒绝成功");
    await fetchAccountMemberApply(row.account_id);
  } catch (error: any) {
    ElMessage.error(error.message || "拒绝失败");
  } finally {
    loading.value = false;
  }
};

const handleStartAccountMember = async (row: AccountMemberRecord) => {
  try {
    loading.value = true;
    await startAccountMember({
      account_id: row.account_id,
      member_id: Number(row.member_id)
    });
    ElMessage.success("启用成功");
    await fetchAccountUsers();
  } catch (error: any) {
    ElMessage.error(error.message || "启用失败");
  } finally {
    loading.value = false;
  }
};

const handleStopAccountMember = async (row: AccountMemberRecord) => {
  try {
    loading.value = true;
    await stopAccountMember({
      account_id: row.account_id,
      member_id: Number(row.member_id)
    });
    ElMessage.success("停用成功");
    await fetchAccountUsers();
  } catch (error: any) {
    ElMessage.error(error.message || "停用失败");
  } finally {
    loading.value = false;
  }
};

// 新增方法
const handleViewAccountUsers = async (accountId: number) => {
  currentAccountId.value = accountId;
  accountUsersDialogVisible.value = true;
  await fetchAccountUsers();
};

const fetchAccountUsers = async () => {
  if (!currentAccountId.value) {
    console.error("账号ID不能为空");
    return;
  }

  try {
    accountUsersLoading.value = true;
    const response = await getPageMemberByAccount({
      account_id: currentAccountId.value,
      team_id: currentTeamInfo.value?.id || 0,
      page: accountUsersPagination.value.current_page,
      size: accountUsersPagination.value.per_page
    });
    accountUsersList.value = response.data.records;
    accountUsersPagination.value = response.data.pagination;
  } catch (error) {
    console.error("获取账号使用人员失败:", error);
  } finally {
    accountUsersLoading.value = false;
  }
};

const handleEditTeam = (row: TeamRecord) => {
  editTeamForm.value = {
    team_id: Number(row.id),
    team_name: row.name,
    description: row.description || ""
  };
  editTeamDialogVisible.value = true;
};

const handleUpdateTeam = async () => {
  try {
    editTeamLoading.value = true;
    await updateTeam(editTeamForm.value);
    ElMessage.success("团队信息更新成功");
    editTeamDialogVisible.value = false;
    fetchTeamData();
  } catch (error: any) {
    ElMessage.error(error.message || "更新失败");
  } finally {
    editTeamLoading.value = false;
  }
};

onMounted(() => {
  fetchTeamData();
  fetchAccountData();
});
</script>

<template>
  <div class="team-container">
    <el-card class="content-card">
      <template #header>
        <div class="card-header">
          <span class="title">{{
            activeTab === "team" ? "团队列表" : "账号管理"
          }}</span>
          <div class="header-right">
            <div class="tag-container">
              <el-tag
                v-show="activeTab === 'team'"
                class="apply-tag"
                type="warning"
                style="cursor: pointer"
                @click="showApplyDialog"
              >
                <el-icon><Edit /></el-icon>
                待审批团队
              </el-tag>
              <el-tag
                v-show="activeTab === 'account'"
                class="apply-tag"
                type="warning"
                style="cursor: pointer"
                @click="showAccountApplyDialog"
              >
                <el-icon><Edit /></el-icon>
                待审批账号
              </el-tag>
            </div>
            <el-radio-group v-model="activeTab" class="tab-group">
              <el-radio-button label="team">团队列表</el-radio-button>
              <el-radio-button label="account">账号管理</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </template>

      <!-- 团队列表 -->
      <div v-if="activeTab === 'team'">
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="name" label="团队名称" width="180" />
          <el-table-column prop="status" label="状态" width="120">
            <template #default="{ row }">
              <el-tag :type="row.status === 'approved' ? 'success' : 'info'">
                {{ row.status === "approved" ? "已批准" : "待审批" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
            show-overflow-tooltip
          />
          <el-table-column prop="created_at" label="创建时间" width="180" />
          <el-table-column prop="updated_at" label="更新时间" width="180" />
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <div class="operation-buttons">
                <el-tag
                  type="info"
                  class="view-tag"
                  style="cursor: pointer"
                  @click="handleViewTeamInfo(row)"
                >
                  <el-icon><User /></el-icon>
                  查看信息
                </el-tag>
                <el-tag
                  type="warning"
                  class="view-tag"
                  style="cursor: pointer"
                  @click="handleEditTeam(row)"
                >
                  <el-icon><Edit /></el-icon>
                  修改信息
                </el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.current_page"
            v-model:page-size="pagination.per_page"
            :total="pagination.total"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next"
            @size-change="fetchTeamData"
            @current-change="fetchTeamData"
          />
        </div>
      </div>

      <!-- 账号管理 -->
      <div v-if="activeTab === 'account'">
        <el-table
          v-loading="accountLoading"
          :data="accountTableData"
          border
          style="width: 100%"
        >
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="team_name" label="团队名称" width="180" />
          <el-table-column prop="account_number" label="账号" width="120" />
          <el-table-column prop="name" label="名称" width="120" />
          <el-table-column prop="status" label="状态" width="120">
            <template #default="{ row }">
              <el-tag :type="row.status === 'approved' ? 'success' : 'info'">
                {{ row.status === "approved" ? "已批准" : "待审批" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
            show-overflow-tooltip
          />
          <el-table-column prop="created_at" label="创建时间" width="180" />
          <el-table-column prop="updated_at" label="更新时间" width="180" />
          <el-table-column label="操作" width="100" fixed="right">
            <template #default="{ row }">
              <el-tag
                type="info"
                class="view-tag"
                style="cursor: pointer"
                @click="handleViewAccountMembers(row)"
              >
                <el-icon><User /></el-icon>
                查看成员
              </el-tag>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination
            v-model:current-page="accountPagination.current_page"
            v-model:page-size="accountPagination.per_page"
            :total="accountPagination.total"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next"
            @size-change="fetchAccountData"
            @current-change="fetchAccountData"
          />
        </div>
      </div>
    </el-card>

    <!-- 审批弹窗 -->
    <el-dialog
      v-model="applyDialogVisible"
      title="团队审批"
      width="80%"
      destroy-on-close
    >
      <el-table
        v-loading="applyLoading"
        :data="applyTableData"
        border
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="team_name" label="团队名称" width="180" />
        <el-table-column
          prop="description"
          label="描述"
          show-overflow-tooltip
        />
        <el-table-column prop="initiator_name" label="申请人" width="120" />
        <el-table-column prop="created_at" label="申请时间" width="180" />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <div class="operation-buttons">
              <el-button
                type="success"
                size="small"
                @click="handleApprove(row)"
              >
                <el-icon><Check /></el-icon>
                同意
              </el-button>
              <el-button type="danger" size="small" @click="handleReject(row)">
                <el-icon><Close /></el-icon>
                拒绝
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="applyPagination.current_page"
          v-model:page-size="applyPagination.per_page"
          :total="applyPagination.total"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next"
          @size-change="fetchApplyTeamData"
          @current-change="fetchApplyTeamData"
        />
      </div>
    </el-dialog>

    <!-- 团队信息对话框 -->
    <el-dialog
      v-model="teamInfoDialogVisible"
      :title="currentTeamInfo?.name + ' - 团队信息'"
      width="80%"
      destroy-on-close
    >
      <el-card class="info-card">
        <template #header>
          <div class="card-header">
            <span>团队公共账号</span>
          </div>
        </template>
        <el-table
          v-loading="teamAccountLoading"
          :data="teamAccountList"
          border
          style="width: 100%"
        >
          <el-table-column prop="account_number" label="账号" width="120" />
          <el-table-column prop="name" label="名称" width="120" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === 'approved' ? 'success' : 'info'">
                {{ row.status === "approved" ? "已批准" : "待审批" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
            show-overflow-tooltip
          />
          <el-table-column prop="created_at" label="创建时间" />
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <div class="operation-buttons">
                <el-tag
                  type="info"
                  class="view-tag"
                  style="cursor: pointer"
                  @click="handleViewAccountUsers(row.id)"
                >
                  <el-icon><User /></el-icon>
                  使用人员
                </el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="teamAccountQuery.page"
            v-model:page-size="teamAccountQuery.size"
            :total="teamAccountList.length"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next"
            @size-change="getTeamAccounts"
            @current-change="getTeamAccounts"
          />
        </div>
      </el-card>
    </el-dialog>

    <!-- 账号审批弹窗 -->
    <el-dialog
      v-model="accountApplyDialogVisible"
      title="账号审批"
      width="80%"
      destroy-on-close
    >
      <el-table
        v-loading="accountApplyLoading"
        :data="accountApplyTableData"
        border
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="team_name" label="团队名称" width="180" />
        <el-table-column prop="account_name" label="账号名称" width="180" />
        <el-table-column
          prop="description"
          label="描述"
          show-overflow-tooltip
        />
        <el-table-column prop="initiator_name" label="申请人" width="120" />
        <el-table-column prop="created_at" label="申请时间" width="180" />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <div class="operation-buttons">
              <el-button
                type="success"
                size="small"
                @click="handleApproveAccount(row)"
              >
                <el-icon><Check /></el-icon>
                通过
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="handleRejectAccount(row)"
              >
                <el-icon><Close /></el-icon>
                拒绝
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="accountApplyPagination.current_page"
          v-model:page-size="accountApplyPagination.per_page"
          :total="accountApplyPagination.total"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next"
          @size-change="fetchAccountApplyData"
          @current-change="fetchAccountApplyData"
        />
      </div>
    </el-dialog>

    <!-- 账号成员弹窗 -->
    <el-dialog
      v-model="accountMemberDialogVisible"
      :title="currentAccountInfo?.name + ' - 账号成员'"
      width="70%"
      destroy-on-close
    >
      <template #header>
        <div class="dialog-header">
          <span>{{ currentAccountInfo?.name + " - 账号成员" }}</span>
          <el-tag
            type="warning"
            class="apply-tag"
            style="cursor: pointer"
            @click="showAccountMemberApplyDialog(currentAccountInfo?.id || 0)"
          >
            <el-icon><Edit /></el-icon>
            待审批成员
          </el-tag>
        </div>
      </template>
      <el-table
        v-loading="accountMemberLoading"
        :data="accountMemberList"
        border
        style="width: 100%"
      >
        <el-table-column prop="henau_number" label="学工号" width="120" />
        <el-table-column prop="member_name" label="姓名" width="120" />
        <el-table-column prop="team_role" label="角色" width="100">
          <template #default="{ row }">
            <el-tag :type="getRoleTagType(row.team_role)">
              {{ getRoleText(row.team_role) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'approved' ? 'success' : 'info'">
              {{ row.status === "approved" ? "启用" : "停用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="加入时间" />
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <div class="operation-buttons">
              <transition name="fade" mode="out-in">
                <el-tag
                  :key="row.status"
                  :type="row.status === 'approved' ? 'danger' : 'success'"
                  class="operation-tag"
                  style="cursor: pointer"
                  @click="
                    row.status === 'approved'
                      ? handleStopAccountMember(row)
                      : handleStartAccountMember(row)
                  "
                >
                  <el-icon>
                    <component
                      :is="row.status === 'approved' ? Close : Check"
                    />
                  </el-icon>
                  {{ row.status === "approved" ? "停用" : "启用" }}
                </el-tag>
              </transition>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="accountMemberPagination.current_page"
          v-model:page-size="accountMemberPagination.per_page"
          :total="accountMemberPagination.total"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next"
          @size-change="
            size => {
              accountMemberPagination.per_page = size;
              fetchAccountMembers(
                currentAccountInfo?.id || 0,
                currentAccountInfo?.team_id || 0
              );
            }
          "
          @current-change="
            page => {
              accountMemberPagination.current_page = page;
              fetchAccountMembers(
                currentAccountInfo?.id || 0,
                currentAccountInfo?.team_id || 0
              );
            }
          "
        />
      </div>
    </el-dialog>

    <!-- 添加账号成员审批弹窗 -->
    <el-dialog
      v-model="accountMemberApplyDialogVisible"
      title="成员审批"
      width="80%"
      destroy-on-close
    >
      <el-table
        v-loading="accountMemberApplyLoading"
        :data="accountMemberApplyList"
        border
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column
          prop="initiator_henau_number"
          label="学工号"
          width="120"
        />
        <el-table-column prop="initiator_name" label="申请人" width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'approved' ? 'success' : 'info'">
              {{ row.status === "approved" ? "已批准" : "待审批" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="申请时间" width="180" />
        <el-table-column prop="updated_at" label="更新时间" width="180" />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <div v-if="row.status === 'pending'" class="operation-buttons">
              <el-button
                type="success"
                size="small"
                @click="handleApproveAccountMember(row)"
              >
                <el-icon><Check /></el-icon>
                通过
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="handleRejectAccountMember(row)"
              >
                <el-icon><Close /></el-icon>
                拒绝
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="accountMemberApplyPagination.current_page"
          v-model:page-size="accountMemberApplyPagination.per_page"
          :total="accountMemberApplyPagination.total"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next"
          @size-change="
            size => {
              accountMemberApplyPagination.per_page = size;
              fetchAccountMemberApply(currentAccountInfo?.id || 0);
            }
          "
          @current-change="
            page => {
              accountMemberApplyPagination.current_page = page;
              fetchAccountMemberApply(currentAccountInfo?.id || 0);
            }
          "
        />
      </div>
    </el-dialog>

    <!-- 账号使用人员弹窗 -->
    <el-dialog
      v-model="accountUsersDialogVisible"
      title="账号使用人员"
      width="70%"
      destroy-on-close
    >
      <el-table
        v-loading="accountUsersLoading"
        :data="accountUsersList"
        border
        style="width: 100%"
      >
        <el-table-column prop="henau_number" label="学工号" width="120" />
        <el-table-column prop="member_name" label="姓名" width="120" />
        <el-table-column prop="team_role" label="角色" width="100">
          <template #default="{ row }">
            <el-tag :type="getRoleTagType(row.team_role)">
              {{ getRoleText(row.team_role) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'approved' ? 'success' : 'info'">
              {{ row.status === "approved" ? "启用" : "停用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="加入时间" />
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <div class="operation-buttons">
              <transition name="fade" mode="out-in">
                <el-tag
                  :key="row.status"
                  :type="row.status === 'approved' ? 'danger' : 'success'"
                  class="operation-tag"
                  style="cursor: pointer"
                  @click="
                    row.status === 'approved'
                      ? handleStopAccountMember(row)
                      : handleStartAccountMember(row)
                  "
                >
                  <el-icon>
                    <component
                      :is="row.status === 'approved' ? Close : Check"
                    />
                  </el-icon>
                  {{ row.status === "approved" ? "停用" : "启用" }}
                </el-tag>
              </transition>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="accountUsersPagination.current_page"
          v-model:page-size="accountUsersPagination.per_page"
          :total="accountUsersPagination.total"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next"
          @size-change="
            size => {
              accountUsersPagination.per_page = size;
              fetchAccountUsers();
            }
          "
          @current-change="
            page => {
              accountUsersPagination.current_page = page;
              fetchAccountUsers();
            }
          "
        />
      </div>
    </el-dialog>

    <!-- 修改团队信息弹窗 -->
    <el-dialog
      v-model="editTeamDialogVisible"
      title="修改团队信息"
      width="500px"
      destroy-on-close
    >
      <el-form :model="editTeamForm" label-width="100px">
        <el-form-item label="团队名称">
          <el-input
            v-model="editTeamForm.team_name"
            disabled
            placeholder="请输入团队名称"
          />
        </el-form-item>
        <el-form-item label="团队描述">
          <el-input
            v-model="editTeamForm.description"
            type="textarea"
            rows="10"
            placeholder="请输入团队描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editTeamDialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            :loading="editTeamLoading"
            @click="handleUpdateTeam"
          >
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.team-container {
  padding: 20px;

  .content-card {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 16px;
      font-weight: 500;
    }

    .header-right {
      display: flex;
      gap: 16px;
      align-items: center;

      .tag-container {
        position: relative;
        width: 100px;
        height: 32px;

        .apply-tag {
          position: absolute;
          top: 0;
          left: 0;
          transition: opacity 0.3s ease;
        }
      }
    }

    .tab-group {
      margin-left: 16px;
    }
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }

  :deep(.el-button) {
    display: flex;
    gap: 4px;
    align-items: center;
  }

  .apply-tag {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 6px 10px;

    .el-icon {
      margin-right: 2px;
    }
  }

  .operation-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    min-width: 70px;
    min-height: 32px;
  }

  .operation-tag {
    position: absolute;
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 4px 8px;
    transition: all 0.3s;

    &:hover {
      opacity: 0.8;
    }

    .el-icon {
      font-size: 14px;
    }
  }

  .view-tag {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 6px 10px;
    cursor: pointer;

    .el-icon {
      margin-right: 2px;
    }
  }

  .info-card {
    height: 100%;

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
    }
  }

  .dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    margin: -20px;
  }

  .dialog-footer {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding-top: 20px;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
}
</style>
